<template>
  <div class="children">
    <el-dialog title="保养项目" :visible.sync="$parent.openObject" width="75%">
      <el-divider>基本信息</el-divider>
      <el-descriptions class="descript" direction="vertical" :column="8" border size="medium">
        <el-descriptions-item label="设备编号">{{ ObjData.equipmentNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ ObjData.equipmentName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ ObjData.brand || '-' }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ ObjData.model || '-' }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ ObjData.supplierName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ ObjData.unitName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="类别">{{ ObjData.typeName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ ObjData.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-divider>保养项目</el-divider>
      <el-table v-loading="loading" :data="tableData">
        <el-table-column label="序号" align="center" prop="order" width="50" />
        <el-table-column label="模块" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.moduleName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="项目" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.projectName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="保养类型" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.typeName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" min-width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.explanation || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" min-width="100">
          <template slot-scope="scope">
            {{ ['选项', '极值', '输入'][scope.row.kind] || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="下限" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.contentI || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上限" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.contentII || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="可选项" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.contentI || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="正常选项" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.contentII || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button @click="() => $parent.openObject = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSelectChildrenandUpkeepProject } from '@/api/maintenance/insurance/insurance.js'
export default {
  props: ['row'],
  data () {
    return {
      ObjData: {},
      loading: false,
      tableData: []
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    /**
     * 初始化
     */
    getlist () {
      this.loading = true
      getSelectChildrenandUpkeepProject(this.row.equipmentAccountId).then(res => {
        this.ObjData = res.data.eaPartInfoVo && res.data.eaPartInfoVo
        this.tableData = res.data.upkeepProjects && res.data.upkeepProjects.map((item, index) => {
          return {
            ...item,
            order: index + 1
          }
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .descript .is-bordered {
  table-layout: fixed
}
</style>